function BarrageBox(root, comments, elementHeight) {
  //调用automatic
  this.automatic()
  this.box = root
  this.comments = comments
  this.elementHeight = elementHeight
}

//自动播放
BarrageBox.prototype.automatic = function () {
  let BhxBrowserThis = this
  getTime = setInterval(
    () => {
      //挑一个假弹幕
      const comment = getRandomItem(this.comments)
      //发送随机弹幕
      this.sendOut(comment)
    }, 1000
  )

  //方法 1
  var hidden, visibilityChange;
  if (typeof document.hidden !== "undefined") {
    hidden = "hidden";
    visibilityChange = "visibilitychange";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
  }

  function handleVisibilityChange() {
    if (document[hidden]) {
      clearInterval(getTime)
    } else {
      getTime = setInterval(
        () => {
          //挑一个假弹幕
          const comment = getRandomItem(BhxBrowserThis.comments)
          //发送随机弹幕
          BhxBrowserThis.sendOut(comment)
        }, 1000
      )

    }
  }

  // 判断浏览器的支持情况
  if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
    console.log("此演示需要一个浏览器，如谷歌浏览器或Firefox，支持页面可见性API。");
  } else {
    // 监听visibilityChange事件
    document.addEventListener(visibilityChange, handleVisibilityChange, false);
  }

  //方法2 不好用

  //   window.onblur = function () {
  //     clearInterval(getTime)
  //   };

  //   window.onfocus = function () {
  //     getTime = setInterval(
  //       () => {
  //         //挑一个假弹幕
  //         const comment = getRandomItem(BhxBrowserThis.comments)
  //         //发送随机弹幕
  //         BhxBrowserThis.sendOut(comment)
  //       }, 1000
  //     )
  //   };
}

//发送模式
BarrageBox.prototype.sendOut = function (comment) {
  for (let i = 0; i < randomNumber(1, 3); i++) {
    //创建一个用来存放弹幕的div
    const div = document.createElement(`div`)
    //div随机颜色    randomNumber(a-b) a-b内的随机数
    div.style.color = getRandomColor()
    //获取页面宽度 赋值到div绝对定位到left
    div.style.left = `${window.innerWidth}px`
    //随机字体size
    div.style.fontSize = `${randomNumber(16, 32)}px`
    div.style.position = `absolute`
    div.style.top = `0px`
    div.style.whiteSpace = `nowrap`
    div.style.float = `left`

    //div随机位置
    div.style.top = `${randomNumber(this.elementHeight, (window.innerHeight)*0.9)}px`

    //弹幕div放到外层box
    this.box.appendChild(div)
    //获取input.vale 赋值到创建的div.innerText
    div.innerText = `${comment}`
    //div动画 move(element,attr,target,callback)
    move(div, `left`, `-${window.innerWidth}px`, randomNumber(13000, 16000), callback)
    //动画执行完毕后回调函数 删除创建的div
    function callback() {
      //div自裁
      div.remove()
    }
  }
}